<template>
  <view class="vccData" v-if="nowpages_data != null">
    <view class="left">
      <view class="vccName">{{ nowpages_data.name }}</view>
      <view class="vccInfo" v-if="nowpages_data.describe">
        <text class="title-block">{{ nowpages_data.describe[0] }}</text>
        <text class="title-block">{{ nowpages_data.describe[1] }}</text>
      </view>
    </view>
    <view class="right">
      <view v-if="nowpages_data.price" class="price">
        ￥{{ nowpages_data.price[0] }}~￥{{ nowpages_data.price[1] }}
      </view>
    </view>
  </view>
  <view class="from_data">
    <!-- 用户信息填写 -->
    <view class="registerInfo">
      <view class="line">
        <text>姓名</text>
        <input
          type="text"
          placeholder="请输入你的姓名"
          placeholder-class="placeholder-style"
          v-model="submitData.name"
        />
      </view>
      <view class="line">
        <text>身份证号码</text>
        <input
          type="text"
          placeholder="请输入你的身份证号码"
          placeholder-class="placeholder-style"
          v-model="identityCard"
        />
      </view>
      <view class="line Category">
        <text>性别</text>
        <picker
          @change="changeSex"
          mode="selector"
          class="flex-1"
          :range="['男', '女']"
        >
          <view class="picker">
            <text :class="{ 'placeholder-style': !sex }">{{
              sex == "" ? "请选择性别" : sex
            }}</text>
            <image src="/static/other/gengduo.svg" mode="" />
          </view>
        </picker>
      </view>
      <view class="line Category">
        <text>出生日期</text>
        <picker @change="changeDate" mode="date" class="flex-1">
          <view class="picker">
            <text :class="{ 'placeholder-style': !born_date }">{{
              born_date == "" ? "请选择出生日期" : born_date
            }}</text>
            <image src="/static/other/gengduo.svg" mode="" />
          </view>
        </picker>
      </view>
      <view class="line">
        <text>手机号码</text>
        <input
          type="text"
          placeholder="请输入你的手机号"
          placeholder-class="placeholder-style"
          v-model="telephoneNumber"
        />
      </view>
    </view>
  </view>
  <!-- 套餐名称与接种时间 -->
  <view class="name_time">
    <view v-for="(item, index) in Name_time" :key="index">
      <view class="title">{{ item.title }}</view>
      <view class="content">
        <view
          v-for="(subitem, i) in item.name"
          :key="i"
          class="gray_block"
          :class="{
            selectClass:
              (index == 0 && i == COMBO) || (index == 1 && i == TIME),
          }"
          @click="
            select(
              i,
              subitem.combo_id || subitem.time_id,
              subitem.combo || subitem.time,
              index
            )
          "
        >
          {{ subitem.combo || subitem.time }}
        </view>
      </view>
    </view>
  </view>
  <view style="height: 200rpx"></view>
  <!-- 底部按钮 -->
  <view class="sumbit" @click="submit">
    <bottom-button
      :leftBtn="`合计: ￥${fullPrice}`"
      rightBtn="提交"
    ></bottom-button>
  </view>
</template>

<script setup>
import { ref, reactive, onMounted, toRefs, watch } from "vue";
import apiRequest from "~/api/index";
import { onLoad } from "@dcloudio/uni-app";
import bottomButton from "~/components/bottomButton/bottomButton.vue";
const id = ref(null);
const hpv_name = ref(null);
const nowpages_data = ref(null);
onLoad((e) => {
  console.log(e, "e");
  id.value = e.id;
  hpv_name.value = e.name;
});

const form_data = reactive({
  realname: "",
  identityCard: "",
  sex: "",
  born_date: "",
  telephoneNumber: "",
});
// 解构
let { realname, identityCard, telephoneNumber, sex, born_date } =
  toRefs(form_data);
// 选择picker栏
const changeSex = (e) => {
  let arr = ["男", "女"];
  sex.value = arr[e.detail.value];
};
const changeDate = (e) => {
  born_date.value = e.detail.value;
};

// 获取时间与名称
const Name_time = ref([]);
onMounted(async () => {
  const res = await apiRequest.OtuHpv();
  nowpages_data.value = res.data[0].hpv_list.filter(
    (item) => item._id == id.value
  )[0];
  const result = await apiRequest.HpvPack();
  Name_time.value = result.data;
  console.log(Name_time.value);
});

// 选择套餐组合(name)
let COMBO = ref(-1);
let combo_id = ref("");
let combo_name = ref("");
// 选择套餐组合(time)
let TIME = ref(-1);
let time_id = ref("");
let combo_time = ref("");
const select = (index, id, name_time, type) => {
  // 选择套餐名字
  if (type === 0) {
    COMBO.value = index;
    combo_id.value = id;
    combo_name.value = name_time;
  } else if (type === 1) {
    // 选择时间
    TIME.value = index;
    time_id.value = id;
    combo_time.value = name_time;
  }
};
const fullPrice = ref(0);
// 计算价格
const getPrice = async () => {
  const res = await apiRequest.HpvPrice(
    id.value,
    combo_id.value,
    time_id.value
  );
  console.log(res);
  fullPrice.value = res.data[0].price;
};
watch([combo_id, time_id], (newVal) => {
  // 当时间与名字都选择上时
  if (newVal[0] != "" && newVal[1] != "") {
    getPrice();
  }
});

// 待提交的数据
let submitData = reactive({
  name: realname,
  id_card: identityCard,
  gender: sex,
  born_date,
  phone: telephoneNumber,
  combo: combo_name,
  ino_time: combo_time,
  price: fullPrice,
  hpv_name,
});

const submit = async () => {
  const res = await apiRequest.ResHpv(submitData);
  if (res.msg == "提交成功") {
    uni.navigateTo({
      url:"/pages/submit-success/hpv-view/index"
    })
  }
};
</script>

<style scoped>
.vccData {
  @apply flex bg-light-50;
  height: 180rpx;
  justify-content: space-between;
  padding: 30rpx 20rpx;
}
.vccData .vccName {
  font-size: 38rpx;
}
.vccData .price {
  @apply font-bold text-red-400;
  display: block;
}
.title-block {
  display: inline-block;
  padding: 2px;
  @apply bg-gray-100;
  border-radius: 10rpx;
  font-size: 25rpx;
  margin-right: 10rpx;
}
.registerInfo {
  margin: 40rpx 0;
  @apply bg-light-50;
}
.line {
  height: 100rpx;
  @apply flex;
  align-items: center;
  border-bottom: 1px solid #dbd7d7;
}
.line text {
  margin-left: 20rpx;
}
.line input {
  @apply text-right;
  padding: 10rpx;
  flex: 1;
}
.line image {
  width: 50rpx;
  height: 50rpx;
  text-align: right;
}
.picker {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: flex-end;
}
.name_time {
  @apply bg-light-50;
  padding-top: 20rpx;
}
.name_time .title {
  @apply font-bold;
  font-size: 36rpx;
  padding-bottom: 20rpx;
  padding-left: 20rpx;
}
.name_time .content {
  @apply flex flex-wrap;
  padding: 0 20rpx;
}
.name_time .gray_block {
  display: inline-block;
  padding: 20rpx 30rpx;
  @apply bg-gray-100;
  border-radius: 10rpx;
  font-size: 30rpx;
  margin-right: 30rpx;
  margin-bottom: 20rpx;
}
bottom-button /deep/ .leftBtn {
  @apply text-red-400 bg-light-50 font-bold;
}
.sumbit {
  @apply fixed bottom-0 left-0 right-0;
}
</style>
